<template>
  <el-button type="info">修改基本信息</el-button>
  <el-button type="info">导出溯源码</el-button>
  <el-descriptions
    title="溯源详情"
    direction="vertical"
    border
    style="margin-top: 20px"
  >
    <el-descriptions-item
      :rowspan="2"
      :width="140"
      label="图片"
      align="center"
    >
    <el-image :src="'http://localhost:5072/api/Upload/UploadFile/UploadFile/'+backData.coverimage" style="width: 200px; height: 200px" />
    </el-descriptions-item>
    <el-descriptions-item label="商品名称">{{backData.goodsId }}</el-descriptions-item>
    <el-descriptions-item label="生产批次">{{ backData.productionbatches }}</el-descriptions-item>
    <el-descriptions-item label="保质期">{{ backData.shelflifeDay }}</el-descriptions-item>
    <el-descriptions-item label="生产许可证号">
        {{ backData.productionlicense }}
    </el-descriptions-item>
    <el-descriptions-item label="生产企业">
      {{ backData.productionCompany }}
    </el-descriptions-item>
    <el-descriptions-item label="产品检验报告">
      <el-upload
    v-model:file-list="fileList"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
    </el-descriptions-item>
  </el-descriptions>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="养殖信息" name="first">
      <el-text>养殖信息</el-text>
      <el-button style="margin-right:20%;" @click="addyangzhi">设置</el-button>
      <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="breed" label="品种" width="140" />
      <el-table-column prop="source" label="来源" width="140" />
      <el-table-column prop="feedingDays" label="饲养天数" width="140" />
      <el-table-column prop="breedingBrand" label="饲养品牌" width="140" />
      <el-table-column prop="headFeeder" label="饲养负责人" width="140" />
      <el-table-column prop="publicationDate" label="出栏日期" width="160">
        <template #default="{row}">
          {{moment(row.publicationDate).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
    </el-table>
    <el-text>保健信息</el-text>
      <el-button style="margin-right:20%;" @click="addpushImunitys">新增行</el-button>
      <el-table :data="ImunityData" style="width: 100%">
      <el-table-column prop="rearingDays" label="饲养天数" width="150" />
      <el-table-column prop="imunityWay" label="保健方式" width="150" />
      <el-table-column prop="imunityMethods" label="保健方法" width="150" />
      <el-table-column  label="操作" width="150">
        <template #default="{row}">
          <el-link @click="handupdateimmuntity(row.imunityId)">修改</el-link>
          <el-link @click="handimuntibyid(row.imunityId)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-text>动检证</el-text>
    <el-upload
    v-model:file-list="fileList"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
    <el-text>企业信息</el-text>
    <el-button style="margin-right:20%;" @click="addpushImunitysCompany">设置</el-button>
    <el-table :data="ImunityCompanyData" style="width: 100%">
      <el-table-column prop="farm" label="养殖场" width="150" />
      <el-table-column prop="principal" label="负责人" width="150" />
      <el-table-column prop="breedingStock" label="存栏数量" width="150" />
    </el-table>
    <el-text>企业照片</el-text>
    <el-upload
    v-model:file-list="fileList"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="屠宰信息" name="second">屠宰信息</el-tab-pane>
    <el-tab-pane label="深加工信息" name="third">深加工信息</el-tab-pane>
  </el-tabs>
  <!--养殖新增-->
  <el-dialog v-model="dialoginsertFormSlaughtersVisible" title="养殖信息" width="500">
    <el-form :model="addslaughterform">
      <el-form-item label="品种" :label-width="100">
        <el-input v-model="addslaughterform.breed" clearable />
      </el-form-item>
      <el-form-item label="来源" :label-width="100">
        <el-input v-model="addslaughterform.source" clearable />
      </el-form-item>
      <el-form-item label="饲养天数" :label-width="100">
        <el-input v-model="addslaughterform.feedingDays" clearable />
      </el-form-item>
      <el-form-item label="饲料品牌" :label-width="100">
        <el-input v-model="addslaughterform.breedingBrand" clearable />
      </el-form-item>
      <el-form-item label="饲养负责人" :label-width="100">
        <el-input v-model="addslaughterform.headFeeder" clearable />
      </el-form-item>
      <el-form-item label="出栏日期" :label-width="100">
        <el-date-picker
        v-model="addslaughterform.publicationDate"
        type="date"
        placeholder="请选择出栏日期"
      />
      </el-form-item>
      <el-form-item label="追溯Id" :label-width="100">
        <el-input v-model="addslaughterform.trId" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="insertslaughter">
          新增
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--保健新增-->
  <el-dialog v-model="dialoginsertFormImmuntityVisible" title="保健信息" width="500">
    <el-form :model="addimuform">
      <el-form-item label="饲养天数" :label-width="100">
        <el-input v-model="addimuform.rearingDays" clearable />
      </el-form-item>
      <el-form-item label="保健方式" :label-width="100">
        <el-input v-model="addimuform.imunityWay" clearable />
      </el-form-item>
      <el-form-item label="保健方法" :label-width="100">
        <el-input v-model="addimuform.imunityMethods" clearable />
      </el-form-item>
      <el-form-item label="饲养Id" :label-width="100">
        <el-input v-model="addimuform.breedingId" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="insertImmuntity">
          新增
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--保健修改-->
  <el-dialog v-model="dialogupdateFormImmuntityVisible" title="修改保健信息" width="500">
    <el-form :model="updimuform">
      <el-form-item label="饲养天数" :label-width="100">
        <el-input v-model="updimuform.rearingDays" clearable />
      </el-form-item>
      <el-form-item label="保健方式" :label-width="100">
        <el-input v-model="updimuform.imunityWay" clearable />
      </el-form-item>
      <el-form-item label="保健方法" :label-width="100">
        <el-input v-model="updimuform.imunityMethods" clearable />
      </el-form-item>
      <el-form-item label="饲养Id" :label-width="100">
        <el-input v-model="updimuform.breedingId" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="updateImmuntity">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--保健新增-->
  <el-dialog v-model="dialoginsertFormImmuntityVisible" title="保健信息" width="500">
    <el-form :model="addimuform">
      <el-form-item label="饲养天数" :label-width="100">
        <el-input v-model="addimuform.rearingDays" clearable />
      </el-form-item>
      <el-form-item label="保健方式" :label-width="100">
        <el-input v-model="addimuform.imunityWay" clearable />
      </el-form-item>
      <el-form-item label="保健方法" :label-width="100">
        <el-input v-model="addimuform.imunityMethods" clearable />
      </el-form-item>
      <el-form-item label="饲养Id" :label-width="100">
        <el-input v-model="addimuform.breedingId" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="insertImmuntity">
          新增
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--养殖企业-->
  <el-dialog v-model="dialogupdateFormImmuntityCompanyVisible" title="养殖企业" width="500">
    <el-form :model="InsertimuCompanyform">
      <el-form-item label="养殖场" :label-width="100">
        <el-input v-model="InsertimuCompanyform.farm" clearable />
      </el-form-item>
      <el-form-item label="负责人" :label-width="100">
        <el-input v-model="InsertimuCompanyform.principal" clearable />
      </el-form-item>
      <el-form-item label="存栏数量（只）" :label-width="100">
        <el-input v-model="InsertimuCompanyform.breedingStock" clearable />
      </el-form-item>
      <el-form-item label="饲养Id" :label-width="100">
        <el-input v-model="InsertimuCompanyform.breedingId" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addImmuntitycompany">
          新增
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRoute} from 'vue-router'
const route=useRoute()
import { ElMessage,ElMessageBox } from 'element-plus';
import moment from 'moment'
import { Plus } from '@element-plus/icons-vue'

onMounted(()=>{
  fantian()
  showslaguhterlist()
  showimmuntitylist()
  showimmuntityCompanylist()
})

import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const backData:any=reactive({
    "trId":"",
  "goodsId":"",
  "productionbatches": "",
  "shelflifeDay":'',
  "productionlicense": "",
  "productionCompany": "",
  "coverimage":""
})

//反填
const fantian=()=>{
  console.log(route.query.trId)
  axios.get('http://localhost:5072/api/TranceShuoYuan/BackTranceById',{
    params:{
      TrId:route.query.trId
    }
  })
  .then(res=>{
    console.log(res)
    console.log('fantian response:', res.data.data) // 调试信息
    Object.assign(backData, res.data.data) // 确保数据结构匹配
    backData.value=res.data.data
  })
  .catch(err=>{
    console.log(err)
  })
}


interface showslaghter{
      "breedingId":'',
      "breed":'',
      "source":'',
      "feedingDays":'',
      "breedingBrand":'',
      "headFeeder":'',
      "publicationDate":'',
      "trId":'',
      "isDeleted": ''
}

const tableData=ref<showslaghter[]>([])

//显示养殖信息
const showslaguhterlist=()=>{
  axios.get('http://localhost:5072/api/Breedings/DisplayBreeding')
  .then(res=>{
    console.log(res.data.data)
    tableData.value=res.data.data
  })
  .catch(err=>{
    console.log(err)
  })
}

//打开设置进行添加
//养殖
const dialoginsertFormSlaughtersVisible=ref(false)
const addyangzhi=()=>{
  dialoginsertFormSlaughtersVisible.value=true

}

interface addslaughterform{
  "breed":string,
  "source":string,
  "feedingDays":number,
  "breedingBrand":string,
  "headFeeder":string,
  "publicationDate": Date,
  "trId":number
}
const addslaughterform=reactive({
  "breed": "",
  "source": "",
  "feedingDays":'',
  "breedingBrand": "",
  "headFeeder": "",
  "publicationDate": "",
  "trId":''
})

//添加养殖信息
const insertslaughter=()=>{
  if(addslaughterform.breed=='')
  {
    ElMessageBox('品种不能为空');
    return
  }
  if(addslaughterform.source=='')
  {
    ElMessageBox('来源不能为空');
    return
  }
  if(addslaughterform.feedingDays=='')
  {
    ElMessageBox('饲养天数不能为空');
    return
  }
  if(addslaughterform.breedingBrand=='')
  {
    ElMessageBox('饲养品牌不能为空');
    return
  }
  if(addslaughterform.headFeeder=='')
  {
    ElMessageBox('饲养负责人不能为空');
    return
  }
  if(addslaughterform.publicationDate=='')
  {
    ElMessageBox('出栏日期不能为空');
    return
  }
  if(addslaughterform.trId=='')
  {
    ElMessageBox('溯源ID不能为空');
    return
  }
  axios.post('http://localhost:5044/api/Breedings/CreateBreeding',addslaughterform)
  .then(res=>{
    console.log(res)
    if(res.data.isSuc)
    {
      ElMessage.success('新增成功')
      dialoginsertFormSlaughtersVisible.value=false
    }
    else{
      ElMessage.error(res.data.msg)
      return
    }
  })
  .catch(err=>{
    console.log(err)
  })
}
//保健信息
interface Immo{
      "imunityId":number,
      "rearingDays":number,
      "imunityWay":string,
      "imunityMethods":string,
      "breedingId":number,
      "isDeleted": boolean
}
const ImunityData=ref<Immo[]>([])

const showimmuntitylist=()=>{
  axios.get('http://localhost:5072/api/Imunitys/DisplayImunity')
  .then(res=>{
    console.log(res.data.data)
    ImunityData.value=res.data.data
  })
  .catch(err=>{
    console.log(err)
  })
}
//打开保健信息
const dialoginsertFormImmuntityVisible=ref(false)
const addpushImunitys=()=>{
  dialoginsertFormImmuntityVisible.value=true
}

interface addimuform{
  "rearingDays":number,
  "imunityWay":string,
  "imunityMethods":string,
  "breedingId":number
}

const addimuform=reactive({
  "rearingDays":'',
  "imunityWay": "",
  "imunityMethods": "",
  "breedingId":''
})
//保健信息新增
const insertImmuntity=()=>{
  axios.post('http://localhost:5044/api/Imunitys/CreateImunity',addimuform)
  .then(res=>{
    console.log(res)
    if(res.data.isSuc)
    {
      ElMessage.success('新增成功')
      dialoginsertFormImmuntityVisible.value=false
    }
    else{
      ElMessage.error(res.data.msg)
      return
    }
  })
  .catch(err=>{
    console.log(err)
  })
}
//删除保健信息
const handimuntibyid=(imunityId:number)=>{
  ElMessageBox.confirm(
    '确认要删除保健信息吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )

  .then(()=>{
    axios.delete('http://localhost:5044/api/Imunitys/DelImunity?ImunityId='+imunityId)
    .then(res=>{
      console.log(res)
      if(res.data.isSuc)
      {
        ElMessage.success('删除成功');
        return
      }
      else{
        ElMessage.error(res.data.msg);
        return
      }
    })
  })
  .catch(err=>{
    console.log(err)
  })
}
//反填
const dialogupdateFormImmuntityVisible=ref(false)
const handupdateimmuntity=(imunityId:number)=>{
  dialogupdateFormImmuntityVisible.value=true
  axios.get('http://localhost:5072/api/Imunitys/BackImunitys',{
    params:{
      ImunityId:imunityId
    }
  })
  .then(res=>{
    console.log(res)
    updimuform.breedingId=res.data.data.breedingId
    updimuform.rearingDays=res.data.data.rearingDays
    updimuform.imunityMethods=res.data.data.imunityMethods
    updimuform.imunityWay=res.data.data.imunityWay
  })
  .catch(err=>{
    console.log(err)
  })
}

interface updimuform{
  "imunityId":number,
  "rearingDays":number,
  "imunityWay":string,
  "imunityMethods":string,
  "breedingId":number
}

const updimuform=reactive({
  "imunityId":'',
  "rearingDays":'',
  "imunityWay": "",
  "imunityMethods": "",
  "breedingId":''
})
//修改保健信息
const updateImmuntity=()=>{
  axios.put('http://localhost:5044/api/Imunitys/UpdateImunity',updimuform)
  .then(res=>{
    console.log(res)
    if(res.data.isSuc)
    {
      ElMessage.success('修改成功')
      dialoginsertFormImmuntityVisible.value=false
    }
    else{
      ElMessage.error(res.data.msg)
      return
    }
  })
  .catch(err=>{
    console.log(err)
  })
}
//新增养殖企业信息
const dialogupdateFormImmuntityCompanyVisible=ref(false)
const addpushImunitysCompany=()=>{
  dialogupdateFormImmuntityCompanyVisible.value=true
}

interface InsertimuCompanyform{
  "farm":string,
  "principal":string,
  "breedingStock":number,
  "breedingId":number
}

const InsertimuCompanyform=reactive({
  "farm": "",
  "principal": "",
  "breedingStock":'',
  "breedingId":''
})
//新增养殖企业信息
const addImmuntitycompany=()=>{
  axios.post('http://localhost:5044/api/BreedEnterprises/CreateBreedingEnterprise',InsertimuCompanyform)
  .then(res=>{
    console.log(res)
    if(res.data.isSuc)
    {
      ElMessage.success('新增成功')
      dialogupdateFormImmuntityCompanyVisible.value=false
    }
    else{
      ElMessage.error(res.data.msg)
      return
    }
  })
  .catch(err=>{
    console.log(err)
  })
}

interface imuntitycompany{
      "enterpriseId":number,
      "farm":string,
      "principal":string,
      "breedingStock":number,
      "breedingId":number,
      "isDeleted": boolean
}

const ImunityCompanyData=ref<imuntitycompany[]>([])

const showimmuntityCompanylist=()=>{
  axios.get('http://localhost:5072/api/BreedEnterprises/DisplayBreedEnterprises')
  .then(res=>{
    console.log(res.data.data)
    ImunityCompanyData.value=res.data.data
  })
  .catch(err=>{
    console.log(err)
  })
}
//图片
//死值
import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  }
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>